<style scoped>
    .swiper-container {
        width: 100%;
        overflow: hidden;
        height: 100%;
    }

    .mshop-swiper {
        display: flex;
        flex-wrap: nowrap;
        height: 100%;
    }

    .mshop-swiper-item {
        /*float: left;*/
        display: inline-block;
        overflow: auto;
        height: 100%;
    }

    .mshop-swiper-header {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        height: 46px;
        z-index: 10;
        color: white;
        background-color: rgb(244, 67, 54);
    }

    .mshop-swiper-header-selector {
        height: 2px;
        background-color: white;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .mshop-swiper-header-item {
        display: inline-block;
        padding: 0 12px;
    }

    .mshop-swiper-header-back:before {
      content: "";
      display: inline-block;
      width: 12px;
      height: 12px;
      border: 2px solid white;
      border-width: 2px 0 0 2px;
      transform: rotate(315deg);
      position: absolute;
      margin: auto;
      top: 0;
      bottom: 0;
      left: 16px;
    }

</style>

<template>
    <div class="swiper-container" >
        <div class="mshop-swiper-header" v-if="headers.length > 0">
            <a class="mshop-swiper-header-back" @click.prevent="click_back"></a>
            <div class="mshop-swiper-header-item" v-for="header in headers">
                {{header}}
            </div>
            <span class="mshop-swiper-header-selector" ></span>
        </div>

        <div class="mshop-swiper">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    import SwiperFactory from 'lib/swiper'

    export default {
        events: {
            'swiper-to': function (index) {
                this.swiper.swiper_to(index);
            }
        },
        props: {
            threshold: {
                type: Number,
                default: 50
            },
            headers: {
                type: Array,
                default: () => []
            },
            header_blur: { type: String },
            blur_index: {
                type: Number,
                default: 0
            },
            scroll_blur: { type: String }
        },
        data () {
            return { swiper: false };
        },
        methods: {
            broadcast (current) {
                console.log('BROADCAST', current);
                this.$broadcast('swiper-current', current);
            },
            click_back () {
                window.history.back();
            }
        },
        ready () {
            this.swiper = new SwiperFactory(this.$el, {
                threshold: this.threshold,
                broadcast: this.broadcast,
                display_header: Boolean(this.headers.length > 0),
                blur_header: this.header_blur,
                blur_scroll: this.scroll_blur,
                blur_index: this.blur_index
            });
        }
    }
</script>
